﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-scroll-pack.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="dBox" style="float: left; width: 100px; height: 200px; border: solid 1px #000;
        background-color: #ff0;">
    </div>
    <div id="dBox1" style="float: left; width: 600px; height: 600px; border: solid 1px #000;
        background-color: #ff0; overflow: hidden">
        <div id="dBox11" style="position: relative; width: 500px; height: 1000px; background-color: #fff;">
            a<br />
            b<br />
            c<br />
            aa<br />
            bb<br />
            cc<br />
            aaa<br />
            bbb<br />
            ccc<br />
            a<br />
            b<br />
            c<br />
            aa<br />
            bb<br />
            cc<br />
            aaa<br />
            bbb<br />
            ccc<br />
            a<br />
            b<br />
            c<br />
            aa<br />
            bb<br />
            cc<br />
            aaa<br />
            bbb<br />
            ccc<br />
            a<br />
            b<br />
            c<br />
            aa<br />
            bb<br />
            cc<br />
            aaa<br />
            bbb<br />
            ccc<br />
            a<br />
            b<br />
            c<br />
            aa<br />
            bb<br />
            cc<br />
            aaa<br />
            bbb<br />
            ccc<br />
        </div>
    </div>
    <div style="float: left; width: 200px;">
        <input type="button" value="Dong" onclick="javascript:moveDbox()" />
        <input type="button" value="Dong" onclick="javascript:moveDbox1()" />
        <script type="text/javascript">
        </script>
        <script type="text/javascript">
            function moveDbox() {
                $('#dBox11').animate({ "top": "+=40px" }, "slow");
            }
            function moveDbox1() {
                $('#dBox11').animate({ "top": "-=40px" }, "slow");
            }
            var intOverallDelta = 0;
            $('#dBox1').mousewheel(function (objEvent, intDelta) {
                if (intDelta > 0) {
                    if (intOverallDelta < 0) {
                        intOverallDelta++;
                        $('#dBox11').animate({ "top": "+=100px" }, "1");
                    }
                }
                else if (intDelta < 0) {
                    if (intOverallDelta >= 0) {
                        intOverallDelta--;
                        $('#dBox11').animate({ "top": "-=100px" }, "1");
                    }
                }
            });

            //$('#dBox11').attr('onmouseover', moveDbox1);

        </script>
    </div>
</body>
</html>
